<template>
  <div class="rank">
               <div class="rank_top">
                   官方榜
               </div>
                 <div class="rank_hot"  v-for="(m,index) in getrank" :key="index">
                         <div class="rank_img">
                             <img :src="`${m.coverImgUrl}?param=150y150`" alt="">
                         </div>
                         <div class="rank_wenzi">
                                 <div class="top_wenzi">{{m.name}}</div>
                                <i class="iconfont icon-shizhong"></i> <div class="rank_time"> 最近更新:{{m.updateTime|dateFormat}}</div>
                                 <i class="iconfont icon-bofang" @click="gotwo(m)"></i>
                                
                         </div> 
                         <ul class="rank_list" >
                            <li v-for="(m,index) in getranklist[index]" :key="index" @click="player(m.id)">
                               <i class="lie">{{index+1}}</i>
                                <i>{{m.name}}</i>
                                <i class="right">{{m.arname}}</i>
                            </li>
                         
                         </ul>
                 </div>
                <div class="rank_gobal"> 
                  全球榜
                </div>
                  <div class="gobal_img" v-for="(m) in getrank2" :key="m.id">
                        <img :src="`${m.coverImgUrl}?param=230y230`" alt=""  @click="gotwo(m)">
                        <i>{{m.name}}</i>
                  </div>

  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data(){
        return{
         
        }
    },
    methods:{
  gotwo(m){
        sessionStorage.setItem('socc',JSON.stringify(m.id))
         sessionStorage.removeItem('plun')
        this.$router.push('/gedantwo')
       
      },
      player(m){
          this.$store.dispatch('getmusiclist',m)
        this.$store.dispatch('getmusic',m)
    
      }
    },
  mounted(){
      this.$store.dispatch('getrank')
       
  },
  watch:{
    getrank(){
       let so = 0
        this.getrank.forEach((item)=>{
             setTimeout(()=>{
                       
               this.$store.dispatch('getranklist',item.id)
             },120*so)
               so++
             
         })
       
    }
  },
  computed:{
      ...mapState({
          getrank:(state)=>{
              //console.log(state.user.getrank);
              return state.user.getrank
          },
          getranklist:(state)=>{
              //console.log(state.user.getranklist);
              return state.user.getranklist
           },
          getrank2:(state)=>{
              return state.user.getrank2
          }
          
      })
  }
}
</script>

<style lang='less' scoped>
   .rank{
       
    position: relative;
     margin: 10px 130px;
     margin-right: -15px;
     height: 100%;
   
      .rank_top{
          margin-top: 20px;
          margin-bottom: 10px;
       font-size: 20px;
       margin-left: 5px;
       font-weight:bold;
          }
      .rank_hot{
          float: left;
          width: 320px;
          height: 430px;
          margin-right: 25px;
       background-color: #f9f9f9;
       cursor: pointer;
       margin-left: 5px;
    
          .rank_img{
                float: left;
              height: 150px;
             
               img{
                   height: 150px;
                   width: 150px;
               }
          }
          
          .rank_wenzi{
              margin-left: 150px;
              width: 170px;
              height: 150px;
              .top_wenzi{
                  font-size: 30px;
                  text-align: center;
                  font-weight: bold;
              }
               .rank_time{
                   font-size: 12px;
                   margin-top: 12px;
                
               }
                .icon-shizhong{
                    float: left;margin-left: 16px;
                    margin-top: 10px;
                    margin-right: 9px;
                     font-size: 15px;
                        
                    }
                   
                    .icon-bofang{
                        display: inline-block;
                         font-size: 58px;
                         color: skyblue;
                         margin: 3px 55px;
                    }
                     .icon-bofang:hover{
                        font-size: 60px;
                       
                    }
          }
          
          .rank_list{
             height: 280px;
             background-color: #fff;
                li{
                    
                    height: 35px;
                     i{
                         display: inline-block;
                       font-size: 12px;
                      width: 140px;
                      text-align: center;
                      margin-top: 10px;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                     }
                     .lie{
                         width: 70px;
                         text-align: left;
                         margin-left: 5px;
                        
                     }
                     .right{
                         float: right;
                         text-align: right;
                         width: 100px;
                         margin-right: 5px;
                     }
                }
                li:hover{
                 
                    color: skyblue;
                     i{
                         font-size: 14px;
                     }
                }
             li:nth-child(n+1):nth-child(-n+3){
                 
                     .lie{
                         color: red;
                          font-weight: bold;
                     }
                    
             }
             li:nth-child(2n){
                 background-color: #f9f9f9;
             }
              
          }
         
      }
      .rank_hot:hover{
           transform: translateY(-3px);
            box-shadow: 3px 3px 10px gray;
      }
      .rank_gobal{
        float: left;
        margin-top: 100px;
        margin-left: 5px;
       font-size: 20px;
       font-weight:bold;
         width: 100%;
         margin-bottom: 10px;
      }
      .gobal_img{
          float: left;
          width: 230px;
          height: 230px;
          margin: 0 50px 0 5px;
          padding-bottom: 40px;
          cursor: pointer;
          
            img{
                width: 230px;
                height: 230px;
               
            }
            i{
                font-size: 18px;
            }
      }
      .gobal_img img:hover{
          transform: scale(1.05);
      }
   }
</style>